<template>
  <el-form ref="roleFormRef" class="custom-form" status-icon :model="addForm"
           :rules="loginRules">
    <el-form-item label="用户名" prop="username" label-width="100px">
      <el-input v-model="addForm.username" placeholder="请输入用户名"/>
    </el-form-item>
    <el-form-item label="昵称" prop="nickName" label-width="100px">
      <el-input v-model="addForm.nickName" placeholder="请输入昵称"/>
    </el-form-item>
    <el-form-item label="性别" prop="gender" label-width="100px">
      <el-radio-group v-model="addForm.gender" class="ml-4">
        <el-radio label="1" size="large">男</el-radio>
        <el-radio label="0" size="large">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="手机号" prop="phone" label-width="100px">
      <el-input v-model="addForm.phone" placeholder="请输入手机号"/>
    </el-form-item>
    <el-form-item label="邮箱" prop="email" label-width="100px">
      <el-input v-model="addForm.email" placeholder="请输入邮箱"/>
    </el-form-item>
    <el-form-item label="所属地市" prop="id" label-width="100px">
      <el-cascader
      v-model="selectCode"
      :options="codeOptions"
      placeholder="请选择行政区划"
      @change="handleChangeCode"
    ></el-cascader>        
    </el-form-item>
    <el-form-item label="是否启用" prop="enabled" label-width="100px">
      <el-switch
          v-model="addForm.enabled"
          size="large"
          active-text="启用"
          inactive-text="禁用"
      />
    </el-form-item>
    <el-form-item label="超级管理员" prop="isAdmin" label-width="100px">
      <el-radio-group v-model="addForm.isAdmin" disabled>
        <el-radio :label="true" size="large">是</el-radio>
        <el-radio :label="false" size="large">否</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
        <el-button color="#3aecff" @click="dialogVisible = false">取 消</el-button>
        <el-button color="#3aecff" type="primary" @click="submit">确 定</el-button>
  </span>
</template>

<script lang="ts" setup>
import {defineProps, ref,watch} from "vue";

import {addUser, editUser} from "@/api/user";
import {ElMessage} from "element-plus";

import {provinceAndCityWithProData,getProvinceCodeByCode} from '@/assets/datas/code'

const props = defineProps({data: {}})
const emit = defineEmits(['refresh'])

const codeOptions = ref(provinceAndCityWithProData)
let selectCode = ref('')
const handleChangeCode = (val)=>{
  addForm.value.regionCode = val[1]
}

const addForm = ref(Object.assign({}, props.data))
watch(
  ()=>props.data,
  (val)=>{
    if(val.regionCode){
      selectCode.value = getProvinceCodeByCode(val.regionCode)
    }
  },
  {
    immediate:true,
    deep:true
  }
)
//@ts-ignore
let isUpdate = !!addForm.value.userId



const loginRules = {
  username: [{required: true, trigger: 'blur', message: '请输入用户名'}],
  nickName: [{required: true, trigger: 'blur', message: '请输入昵称'}],
  phone: [{required: true, trigger: 'blur', message: '请输入手机号'}],
  email: [{required: true, trigger: 'blur', message: '请输入邮箱'}]
}



const submit = () => {
  if (isUpdate) {
    editUser(addForm.value)
        .then(resp => {
          if (resp.code == 200) {
            ElMessage.success('更新成功')
            emit('refresh')
          } else {
            ElMessage.error('更新失败')
          }
        })
  } else {
    addUser(addForm.value)
        .then(resp => {
          if (resp.code == 200) {
            ElMessage.success('添加成功')
            emit('refresh')
          } else {
            ElMessage.error('添加失败')
          }
        })
  }

}
</script>

<style scoped lang="scss">
.title {
  font-size: 15px;
  margin: 10px 0;
  padding-left: 5px;
  color: #1A88F1;
  border-left: 3px solid #1A88F1;
}
</style>
